@charset "UTF-8";
/*简单文本动画*/
@-webkit-keyframes loader-text {
    25% {
        content: '加载中.';
    }
    50% {
        content: '加载中..';
    }
    75% {
        content: '加载中...';
    }
}
@keyframes loader-text {
    25% {
        content: '加载中.';
    }
    50% {
        content: '加载中..';
    }
    75% {
        content: '加载中...';
    }
}

.loader-text {
    width: 75px;
}
.loader-text:before {
    content: '加载中';
    -webkit-animation: loader-text .8s infinite;
    animation: loader-text .8s infinite;
}

/*旋转*/
@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/*普通圆圈loader*/
.loader-round {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    border: 1px solid rgba(128, 128, 128, 0.31);
    border-left-color: gray;
    -webkit-animation: rotate 1s linear infinite;
    animation: rotate 1s linear infinite;
}

/*圆点放大颜色淡出*/
@-webkit-keyframes loader-dot {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        background-color: rgb(128, 128, 128);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        background-color: rgba(128, 128, 128, 0);
    }
}
@keyframes loader-dot {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        background-color: rgb(128, 128, 128);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        background-color: rgba(128, 128, 128, 0);
    }
}

.loader-dot {
    position: relative;
    width: 30px;
    height: 30px;
}
.loader-dot:before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 100%;
    background-color: rgb(128, 128, 128);
    -webkit-animation: loader-dot 1s infinite cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation: loader-dot 1s infinite cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/*伸缩 1-0*/
@-webkit-keyframes scale-sm {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@keyframes scale-sm {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.loader-double-dot {
    position: relative;
    width: 30px;
    height: 30px;
}
.loader-double-dot:before, .loader-double-dot:after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 100%;
    background-color: rgba(128, 128, 128, 0.6);
    -webkit-animation: scale-sm 1.6s infinite ease-in-out;
    animation: scale-sm 1.6s infinite ease-in-out;
}
.loader-double-dot:after {
    -webkit-animation-delay: -.8s;
    animation-delay: -.8s;
}

.loader-double-dot2 {
    width: 100px;
    height: 30px;
    text-align: center;
    -webkit-animation: rotate 1s linear infinite;
    animation: rotate 1s linear infinite;
}
.loader-double-dot2:before, .loader-double-dot2:after {
    content: "";
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background-color: rgba(128, 128, 128, 0.6);
    -webkit-animation: scale-sm 1.6s infinite ease-in-out;
    animation: scale-sm 1.6s infinite ease-in-out;
}
.loader-double-dot2:after {
    -webkit-animation-delay: -.8s;
    animation-delay: -.8s;
}

/*方形3D旋转*/
@-webkit-keyframes loader-square {
    0% {
        -webkit-transform:perspective(100px) rotateX(0deg) rotateY(0deg);
        transform:perspective(100px) rotateX(0deg) rotateY(0deg);
    }
    50% {
        -webkit-transform:perspective(100px)  rotateX(0deg) rotateY(180deg);
        transform:perspective(100px)  rotateX(0deg) rotateY(180deg);
    }
    100% {
        -webkit-transform:perspective(100px)  rotateX(-180deg) rotateY(180deg);
        transform:perspective(100px)  rotateX(-180deg) rotateY(180deg);
    }
}
@keyframes loader-square {
    0% {
        -webkit-transform:perspective(100px) rotateX(0deg) rotateY(0deg);
        transform:perspective(100px) rotateX(0deg) rotateY(0deg);
    }
    50% {
        -webkit-transform:perspective(100px)  rotateX(0deg) rotateY(180deg);
        transform:perspective(100px)  rotateX(0deg) rotateY(180deg);
    }
    100% {
        -webkit-transform:perspective(100px)  rotateX(-180deg) rotateY(180deg);
        transform:perspective(100px)  rotateX(-180deg) rotateY(180deg);
    }
}

.loader-square {
    width: 30px;
    height: 30px;
}
.loader-square:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(128, 128, 128, 0.6);
    -webkit-animation:loader-square 1.5s infinite ease-in-out;
    animation:loader-square 1.5s infinite ease-in-out;
}

@-webkit-keyframes loader-double-square-before {
    0% {
        -webkit-transform: translate(0, 0) scale(.8) rotate(0deg);
        transform: translate(0, 0) scale(.8) rotate(0deg);
    }
    50% {
        -webkit-transform: translate(100%, 0) scale(.5) rotate(90deg);
        transform: translate(100%, 0) scale(.5) rotate(90deg);
    }
    100% {
        -webkit-transform: translate(100%, 100%) scale(.8) rotate(180deg);
        transform: translate(100%, 100%) scale(.8) rotate(180deg);
    }
}
@-webkit-keyframes loader-double-square-after {
    0% {
        -webkit-transform: translate(0, 0) scale(.8) rotate(0deg);
        transform: translate(0, 0) scale(.8) rotate(0deg);
    }
    50% {
        -webkit-transform: translate(-100%, 0) scale(.5) rotate(90deg);
        transform: translate(-100%, 0) scale(.5) rotate(90deg);
    }
    100% {
        -webkit-transform: translate(-100%, -100%) scale(.8) rotate(180deg);
        transform: translate(-100%, -100%) scale(.8) rotate(180deg);
    }
}
@keyframes loader-double-square-before {
    0% {
        -webkit-transform: translate(0, 0) scale(.8) rotate(0deg);
        transform: translate(0, 0) scale(.8) rotate(0deg);
    }
    50% {
        -webkit-transform: translate(100%, 0) scale(.5) rotate(90deg);
        transform: translate(100%, 0) scale(.5) rotate(90deg);
    }
    100% {
        -webkit-transform: translate(100%, 100%) scale(.8) rotate(180deg);
        transform: translate(100%, 100%) scale(.8) rotate(180deg);
    }
}
@keyframes loader-double-square-after {
    0% {
        -webkit-transform: translate(0, 0) scale(.8) rotate(0deg);
        transform: translate(0, 0) scale(.8) rotate(0deg);
    }
    50% {
        -webkit-transform: translate(-100%, 0) scale(.5) rotate(90deg);
        transform: translate(-100%, 0) scale(.5) rotate(90deg);
    }
    100% {
        -webkit-transform: translate(-100%, -100%) scale(.8) rotate(180deg);
        transform: translate(-100%, -100%) scale(.8) rotate(180deg);
    }
}

.loader-double-square {
    position: relative;
    width: 60px;
    height: 60px;
}
.loader-double-square:before, .loader-double-square:after {
    content: "";
    display: inline-block;
    width: 30px;
    height: 30px;
    background-color: rgba(128, 128, 128, 0.6);
    -webkit-transform: scale(.8);
    transform: scale(.8);
}
.loader-double-square:before {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: loader-double-square-before 1s infinite ease-in-out;
    animation: loader-double-square-before 1s infinite ease-in-out;
}
.loader-double-square:after {
    position: absolute;
    right: 0;
    bottom: 0;
    -webkit-animation: loader-double-square-after 1s infinite ease-in-out;
    animation: loader-double-square-after 1s infinite ease-in-out;
}

/*上下位移*/
@-webkit-keyframes translate-up-dowm {
    0%,50%,100%{
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    25%{
        -webkit-transform: translateY(10%);
        transform: translateY(10%);
    }
    75%{
        -webkit-transform: translateY(-10%);
        transform: translateY(-10%);
    }
}
@keyframes translate-up-dowm {
    0%,50%,100%{
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    25%{
        -webkit-transform: translateY(10%);
        transform: translateY(10%);
    }
    75%{
        -webkit-transform: translateY(-10%);
        transform: translateY(-10%);
    }
}
.loader-rect {
    position: relative;
    width: 64px;
    height: 30px;
}
.loader-rect:before, .loader-rect:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity:.6;
    -webkit-animation:translate-up-dowm 2s ease infinite;
    animation:translate-up-dowm 2s ease infinite;
}
.loader-rect:before{
    background-image: -webkit-linear-gradient(to right, gray 6px, transparent 6px, transparent 16px,
    gray 16px, gray 22px, transparent 22px, transparent 32px,
    gray 32px, gray 38px, transparent 38px, transparent 48px,
    gray 48px, gray 54px, transparent 54px, transparent 64px);
    background-image: linear-gradient(to right, gray 6px, transparent 6px, transparent 16px,
    gray 16px, gray 22px, transparent 22px, transparent 32px,
    gray 32px, gray 38px, transparent 38px, transparent 48px,
    gray 48px, gray 54px, transparent 54px, transparent 64px);
}
.loader-rect:after{
    background-image:  -webkit-linear-gradient(to right, transparent 8px, gray 8px, gray 14px,
    transparent 14px, transparent 24px, gray 24px, gray 30px,
    transparent 30px, transparent 40px, gray 40px, gray 46px,
    transparent 46px, transparent 56px, gray 56px, gray 62px,transparent 62px);
    background-image: linear-gradient(to right, transparent 8px, gray 8px, gray 14px,
    transparent 14px, transparent 24px, gray 24px, gray 30px,
    transparent 30px, transparent 40px, gray 40px, gray 46px,
    transparent 46px, transparent 56px, gray 56px, gray 62px,transparent 62px);
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
}

@-webkit-keyframes loader-rect2 {
    0% {
        left: 0;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    50% {
        left: 100%;
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
    100% {
        left: 0;
        -webkit-transform: rotate(720deg);
        transform: rotate(720deg);
    }
}
@keyframes loader-rect2 {
    0% {
        left: 0;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    50% {
        left: 100%;
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
    100% {
        left: 0;
        -webkit-transform: rotate(720deg);
        transform: rotate(720deg);
    }
}
.loader-rect2 {
    position: relative;
    width: 60px;
    height: 30px;
}
.loader-rect2:before,.loader-rect2:after{
    content: "";
    display: block;
    width: 5px;
    height: 30px;
    background-color: rgba(128, 128, 128, 0.6);
    position: absolute;
    left: 0;
    top:0;
    -webkit-animation:loader-rect2 2s ease infinite;
    animation:loader-rect2 2s ease infinite;
}
.loader-rect2:after {
    background-color: rgba(128, 128, 128, 0.6);
    -webkit-animation-delay:-1.5s;
    animation-delay:-1.5s;
}
